<!DOCTYPE html>
<html>
	<head>
		<title>表单列表</title>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">
		
		<script src="../../static/kj/vue.min.js"></script>
		<script src="../../static/kj/axios.min.js"></script>
		<script src="../../static/kj/element-ui/index.js"></script>
		<script src="../../static/kj/jquery.min.js"></script>
		<script src="../../static/kj/layer/layer.js"></script>

		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/config.js"></script>

		<style type="text/css">
			.demo-table-expand {
				font-size: 0;
			}

			.demo-table-expand label {
				width: 90px;
				color: #99a9bf;
			}

			.demo-table-expand .el-form-item {
				margin-right: 0;
				margin-bottom: 0;
				width: 100%;
				border-bottom: 1px #eeeeee solid;
			}
		</style>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<div class="c-panel">
				<!-- ------------- 参数栏 ------------- -->
				<div class="c-title">检索参数</div>
				<el-form>
					<div class="c-item">
						<label class="c-label">名称：</label>
						<el-input size="mini" v-model="queryParams[0].right[0]" placeholder="模糊查询"></el-input>
					</div>

					<div class="c-item">
						<label class="c-label">类目：</label>
						<el-cascader size="mini" :options="types" v-model="typeChooseValue" @change="searchType"
							filterable :props="typeProps" clearable>
						</el-cascader>
					</div>

					<div class="c-item" style="min-width: 0px;">
						<el-button size="mini" type="primary" icon="el-icon-search" @click="params.page = 1; f5()">查询
						</el-button>
					</div>
				</el-form>

				<!-- ------------- 快捷按钮 ------------- -->
				<div class="fast-btn">
					<!-- <el-button size="mini" type="primary" icon="el-icon-plus" @click="add()">新增</el-button> -->
					<!-- <el-button size="mini" type="success" icon="el-icon-view" @click="getBySelect()">查看</el-button> -->
					<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteByIds()">批量删除</el-button>
					<el-button size="mini" type="warning" icon="el-icon-download"
						@click="sa.exportExcel('.wuyan-table')">导出</el-button>
					<el-button size="mini" type="info" icon="el-icon-refresh" @click="sa.f5()">重置</el-button>
				</div>

				<!-- ------------- 数据列表 ------------- -->
				<el-table :data="dataList" size="small" ref="data-table" class="wuyan-table">
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-form label-position="left" inline class="demo-table-expand">
								<el-form-item label="表单模型">
									<span>{{ props.row.formModel }}</span>
								</el-form-item>

								<el-form-item label="接口地址">
									<span>{{ props.row.url }}</span>
								</el-form-item>

								<el-form-item label="表单尺寸" prop="size">
									<span>{{ props.row.size }}</span>
								</el-form-item>

								<el-form-item label="标签对其">
									<span>{{ props.row.labelPosition }}</span>
								</el-form-item>

								<el-form-item label="标签宽度">
									<span>{{ props.row.labelWidth }}</span>
								</el-form-item>

								<el-form-item label="校验模型">
									<span>{{ props.row.formRules }}</span>
								</el-form-item>

								<el-form-item label="栅格间隔">
									<span>{{ props.row.gutter }}</span>
								</el-form-item>

								<el-form-item label="页面类型">
									<span>{{ props.row.pageType }}</span>
								</el-form-item>

								<el-form-item label="备注">
									<span>{{ props.row.remark }}</span>
								</el-form-item>
							</el-form>
						</template>
					</el-table-column>

					<el-table-column align="center" type="selection" width="45px"></el-table-column>

					<el-table-column align="center" label="编号" prop="id" width="60"></el-table-column>
					<el-table-column align="center" label="名称" prop="name"></el-table-column>
					<el-table-column align="center" label="表单名" prop="formRef"></el-table-column>
					<el-table-column align="center" label="数据量" prop="dataCount"></el-table-column>

					<el-table-column align="center" label="分类" :show-overflow-tooltip="true">
						<template slot-scope="s">
							<el-button type="text" @click="showChooseType(s.$index, s.row)">
								{{s.row.typeName ? s.row.typeName : '选择'}}
							</el-button>
						</template>
					</el-table-column>

					<el-table-column align="center" label="禁用">
						<template slot-scope="s">
							<el-switch v-model="s.row.disabled" :active-value="1" :inactive-value="0"
								inactive-color="#ff4949"
								@change="chooseData.row = s.row;switchEvent($event, 'disabled')"></el-switch>
						</template>
					</el-table-column>
					<el-table-column align="center" label="允许提交">
						<template slot-scope="s">
							<el-switch v-model="s.row.formBtns" :active-value="1" :inactive-value="0"
								inactive-color="#ff4949"
								@change="chooseData.row = s.row;switchEvent($event, 'formBtns')"></el-switch>
						</template>
					</el-table-column>
					<el-table-column align="center" label="边框线">
						<template slot-scope="s">
							<el-switch v-model="s.row.unFocusedComponentBorder" :active-value="1" :inactive-value="0"
								inactive-color="#ff4949"
								@change="chooseData.row = s.row;switchEvent($event, 'unFocusedComponentBorder')">
							</el-switch>
						</template>
					</el-table-column>
					<el-table-column align="center" label="状态">
						<template slot-scope="s">
							<el-switch v-model="s.row.status" :active-value="1" :inactive-value="0"
								inactive-color="#ff4949" @change="chooseData.row = s.row;switchEvent($event, 'status')">
							</el-switch>
						</template>
					</el-table-column>

					<el-table-column align="center" label="更新时间" prop="operateTime" width="140">
						<template slot-scope="s">
							<span>{{timestampToTime(s.row.operateTime)}}</span>
						</template>
					</el-table-column>

					</el-table-column>
					<el-table-column align="center" label="操作" width="260px" fixed="right">
						<template slot-scope="s">
							<el-button class="c-btn" type="success" icon="el-icon-view" @click="get(s.row)">预览
							</el-button>
							<el-button class="c-btn" type="primary" icon="el-icon-edit" @click="update(s.row)">设计
							</el-button>
							<el-button class="c-btn" type="success" icon="el-icon-document-copy" @click="copy(s.row)">拷贝
							</el-button>
							<el-button class="c-btn" type="warm" icon="" @click="fullText(s.row)">启用关键词检索
							</el-button>
							<el-button class="c-btn" type="danger" icon="el-icon-delete" @click="del(s.row)">删除
							</el-button>
						</template>
					</el-table-column>

				</el-table>

				<!-- ------------- 分页 ------------- -->
				<div class="page-box">
					<el-pagination background layout="total, prev, pager, next, sizes, jumper"
						:current-page.sync="params.page" :page-size.sync="params.limit" :total="dataList.length"
						:page-sizes="[15,30,50,100,500,1000]" @current-change="f5()" @size-change="f5()">
					</el-pagination>
				</div>

				<!-- 分类选择器 -->
				<el-dialog title="选择分类" :visible.sync="dialogTypeVisible">
					<el-tree :data="types" :props="typeProps" @node-click="changeType" lazy :load="typeProps.lazyLoad">
					</el-tree>
				</el-dialog>
			</div>
		</div>

		<script src="../../sa-resources/api.js"></script>
		<script src="../../sa-resources/wuyan.js"></script>
		<script src="../../sa-resources/element-ui-helper.js"></script>

		<script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					// 请求参数  
					params: {
						params: '',
						page: 1,
						limit: 15
					},
					// 查询参数
					queryParams: [{
							left: 'name',
							op: 'like',
							right: ['']
						},
						{
							left: 'typeName',
							op: 'like',
							right: ['']
						},
					],
					// 当前数据
					dataList: [],
					// 数据量
					dataCount: 0,
					// 选中参数
					chooseData: {
						row: null,
						index: -1,
						field: null,
						fieldValue: '',
					},
					types: [],
					typeChooseValue: '',
					typeProps: {
						expandTrigger: 'hover',
						value: 'name',
						label: 'name',
						children: 'children',
						isLeaf: 'leaf',
						lazy: true,
						lazyLoad: (node, resolve) => {
							if (node.level > 1) {
								return resolve([])
							}

							if (this.app) {
								this.app.findTypeChildren(node, resolve)
							} else {
								resolve([])
							}
						}
					},
					dialogTypeVisible: false,
				},
				created: function() {
					this.init()
				},
				methods: {
					init() {
						axiosConfig(axios)
						this.getTypes()

						this.f5();
						sa.onInputEnter(); // 监听输入框的回车事件，执行查询  
					},

					/**
					 * 获取分类数据
					 */
					getTypes() {
						let loading = elLoadding({
							that: this
						})

						// 查询参数
						let queryParams = [{
								left: 'name',
								op: 'like',
								right: ['']
							},
							{
								left: 'parentId',
								op: 'eq',
								right: [baseConfig.type.formParentId]
							},
						]

						// 请求参数
						let params = {
							isPage: false,
							page: 1,
							limit: 15,
							params: '[]',
						}

						params.params = queryParamsToJsonStr(queryParams)
						let url = getUrl('pub-type', 'list')
						let http = getHttp(axios, 'pub-type', 'list')
						http(url, {
								params: params
							})
							.then(res => {
								this.types = res.list ? res.list : []; // 数据

								loading.close();
							})
							.catch((err) => { // 请求失败处理
								this.$notify.info({
									title: '消息',
									message: '初始化数据失败'
								});

								loading.close();
							});
					},

					/**
					 * 加载分类子节点
					 * @param {Object} node
					 * @param {Object} resolve
					 */
					findTypeChildren(node, resolve) {
						if (!node.data.id) {
							return resolve(this.types)
						}

						let params = {
							isPage: false,
							params: queryParamsToJsonStr([{
								left: 'parentId',
								op: 'eq',
								right: [node.data.id]
							}])
						}

						let url = getUrl('pub-type', 'list')
						let http = getHttp(axios, 'pub-type', 'list')
						http(url, {
								params: params
							})
							.then(res => {
								let list = res.list ? res.list : []

								list.forEach(item => {
									item['leaf'] = true
								})

								resolve(list)
							})
							.catch((err) => {
								resolve([])
							});
					},

					// 刷新
					f5: function() {
						let loading = elLoadding({
							that: this
						})

						this.params.params = queryParamsToJsonStr(this.queryParams)

						axios.get('/wuyan/api/pub-form', {
								params: this.params
							})
							.then(res => {
								this.dataList = res.list ? res.list : []; // 数据
								this.dataCount = res.count; // 分页
								sa.f5TableHeight(); // 刷新表格高度 

								loading.close();
							})
							.catch((err) => { // 请求失败处理
								this.$notify.info({
									title: '消息',
									message: '初始化数据失败'
								});

								loading.close();
							});
					},

					// switch事件
					switchEvent: function(e, field) {
						let loading = elLoadding({
							that: this
						})

						axios.put('/wuyan/api/pub-form/' + this.chooseData.row.id + '/' + field + '/' + e)
							.then(res => {
								loading.close();
							})
							.catch((err) => { // 请求失败处理
								this.chooseData.row[field] = e == 1 ? 0 : 1
								this.$notify.info({
									title: '消息',
									message: '操作失败'
								});

								loading.close();
							});
					},

					// 查看
					get: function(data) {
						sa_admin.showTab({
							id: 'form-show-' + data.id,
							name: data.name + '预览表单',
							url: getFormUrl({
								path: 'index.html',
								params: 'id=' + data.id + '&op=run&tab=form-show-' + data.id,
								position: '/show'
							})
						});
					},

					// 修改
					update: function(data) {
						sa_admin.showTab({
							id: 'form-update-' + data.id,
							name: data.name + '表单修改',
							url: getFormUrl({
								path: 'index.html',
								params: 'id=' + data.id + '&tab=form-update-' + data.id,
								position: ''
							})
						});
					},

					// 拷贝
					copy: function(data) {
						sa_admin.showTab({
							id: 'form-copy-' + data.id,
							name: data.name + '表单拷贝',
							url: getFormUrl({
								path: 'index.html',
								params: 'id=' + data.id + '&op=copy&tab=form-copy-' + data.id,
								position: ''
							})
						});
					},
					
					fullText(data){
						let loading = elLoadding({
							that: this
						})
						
						let url = getUrl('form-data', 'ensure-index-full-text', {
							form: data.formRef
						})
						let http = getHttp(axios, 'form-data', 'ensure-index-full-text')
						http(url, {}).then(res => {
							if(res){
								sa.ok('建立成功');
							}else {
								sa.error('不要重复建立');
							}
							loading.close();
						}).catch((err) => { // 请求失败处理
							sa.error(err.msg);
							loading.close();
						});
					},

					// 删除
					del: function(data) {
						sa.confirm('是否删除，此操作不可撤销', function() {
							let loading = elLoadding({
								that: this
							})

							axios.delete('/wuyan/api/pub-form/' + data.id)
								.then(res => {
									this.f5()
									sa.ok('删除成功');

									loading.close();
								})
								.catch(function(err) { // 请求失败处理
									this.$notify.info({
										title: '消息',
										message: '操作失败'
									});

									loading.close();
								});
						}.bind(this));
					},

					// 批量删除
					deleteByIds: function() {
						// 获取选中元素的id列表
						let selection = this.$refs['data-table'].selection;
						let ids = sa.getArrayField(selection, 'id');
						if (selection.length == 0) {
							return sa.msg('请至少选择一条数据')
						}

						// 提交删除 
						sa.confirm('是否删除，此操作不可撤销', function() {
							let loading = elLoadding({
								that: this
							})

							axios.delete('/wuyan/api/pub-form/' + ids.toString())
								.then(res => {
									this.f5()
									sa.ok('删除成功');

									loading.close();
								})
								.catch(function(err) { // 请求失败处理
									this.$notify.info({
										title: '消息',
										message: '操作失败'
									});

									loading.close();
								});
						}.bind(this));
					},

					/**
					 * 分类确认
					 * @param {Object} value
					 */
					changeType(data, node, nodeInfo) {
						if (!node.isLeaf) {
							return
						}
						
						let value = ''
						if(node.parent && node.parent.data instanceof Object){
							value = node.parent.data.name + '-' + node.data.name
						}
						
						if(this.chooseData.row.typeName == value){
							this.dialogTypeVisible = false
							return
						}

						let loading = elLoadding({
							that: this
						})

						let url = getUrl('pub-form', 'upField', {
							id: this.chooseData.row.id,
							field: 'typeName',
							value: value
						})
						let http = getHttp(axios, 'pub-form', 'upField')
						http(url, {})
							.then(res => {
								this.dialogTypeVisible = false
								this.chooseData.row.typeName = value
								this.$set(this.dataList, this.chooseData.index, this.chooseData.row)

								loading.close();
							})
							.catch((err) => { // 请求失败处理
								this.$notify.info({
									title: '消息',
									message: '失败了'
								});

								loading.close();
							});
					},

					/**
					 * 打开分类选择器
					 * @param {Object} data
					 */
					showChooseType(index, data) {
						this.dialogTypeVisible = true
						this.chooseData.row = data
						this.chooseData.index = index

						if (data.typeName) {
							this.chooseData.fieldValue = data.typeName
						} else {
							this.chooseData.fieldValue = ''
						}
					},

					/**
					 * 搜索区:类目选择
					 * @param {Object} value
					 */
					searchType(value) {
						this.queryParams[1].right[0] = value.join('-')
						this.f5()
					},
				}
			})
		</script>
	</body>
</html>
